import React from 'react';
import { Modal, Descriptions, Tag } from 'antd';
import moment from 'moment';

const CouponDetailModal = ({ visible, onCancel, coupon }) => {
  return (
    <Modal
      title="优惠券详情"
      visible={visible}
      onCancel={onCancel}
      footer={null}
      width={700}
    >
      {coupon && (
        <Descriptions column={2} bordered>
          <Descriptions.Item label="优惠券名称">{coupon.name}</Descriptions.Item>
          <Descriptions.Item label="优惠券类型">
            {coupon.type === 0 ? '折扣券' : coupon.type === 1 ? '满减券' : '现金券'}
          </Descriptions.Item>
          <Descriptions.Item label="状态">
            <Tag color={coupon.status === 1 ? 'green' : 'red'}>
              {coupon.status === 1 ? '启用' : '禁用'}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="有效期">{coupon.valid_days}天</Descriptions.Item>
          
          {coupon.type === 0 && (
            <>
              <Descriptions.Item label="折扣率">{(coupon.value / 10).toFixed(1)}折</Descriptions.Item>
              <Descriptions.Item label="使用门槛">
                {coupon.min_consume ? `¥${(coupon.min_consume / 100).toFixed(2)}` : '无门槛'}
              </Descriptions.Item>
              <Descriptions.Item label="最大优惠">
                {coupon.max_amount ? `¥${(coupon.max_amount / 100).toFixed(2)}` : '无上限'}
              </Descriptions.Item>
            </>
          )}
          
          {coupon.type === 1 && (
            <>
              <Descriptions.Item label="满减条件">满¥{(coupon.min_consume / 100).toFixed(2)}</Descriptions.Item>
              <Descriptions.Item label="减免金额">减¥{(coupon.value / 100).toFixed(2)}</Descriptions.Item>
            </>
          )}
          
          {coupon.type === 2 && (
            <Descriptions.Item label="现金券金额">¥{(coupon.value / 100).toFixed(2)}</Descriptions.Item>
          )}
          
          <Descriptions.Item label="发行总量">
            {coupon.total_count > 0 ? coupon.total_count : '不限量'}
          </Descriptions.Item>
          <Descriptions.Item label="已发放数量">{coupon.issued_count || 0}</Descriptions.Item>
          <Descriptions.Item label="已使用数量">{coupon.used_count || 0}</Descriptions.Item>
          <Descriptions.Item label="每人限领">{coupon.per_limit || 1}张</Descriptions.Item>
          
          <Descriptions.Item label="创建时间" span={2}>
            {coupon.created_at ? moment(Number(String(coupon.created_at).length === 10 ? coupon.created_at * 1000 : coupon.created_at)).format('YYYY-MM-DD HH:mm:ss') : '-'}
          </Descriptions.Item>
          
          <Descriptions.Item label="更新时间" span={2}>
            {coupon.updated_at ? moment(Number(String(coupon.updated_at).length === 10 ? coupon.updated_at * 1000 : coupon.updated_at)).format('YYYY-MM-DD HH:mm:ss') : '-'}
          </Descriptions.Item>

          <Descriptions.Item label="可用星期" span={2}>
            {coupon.available_weekdays ? coupon.available_weekdays.split(',').map(day => `周${{0:'日',1:'一',2:'二',3:'三',4:'四',5:'五',6:'六'}[day]}`).join(', ') : '不限'}
          </Descriptions.Item>

         <Descriptions.Item label="可用时段" span={2}>
          {coupon.available_times && JSON.parse(coupon.available_times).map(t => `${t.start}-${t.end}`).join(', ')}
        </Descriptions.Item>
          
          <Descriptions.Item label="描述" span={2}>
            {coupon.description || '-'}
          </Descriptions.Item>
        </Descriptions>
      )}
    </Modal>
  );
};

export default CouponDetailModal;